import React from "react";

import { useState, useEffect } from "react";
import { StyleSheet, Text, View } from "react-native";


function TimerView() {

    const [count, setCount] = useState(0)

    useEffect(() => {

        const interval = setInterval(() => {
            //闭包知识（取上次保存的值）
            setCount((data) => {
                console.log(`interVal...${data}`)
                return data + 1
            })

        }, 1000);

        return () => {
            clearInterval(interval);
        }

    }, []);

    return (

        <View style={styles.container}>

            <Text style={styles.title}>
                {`RN计数器`}
            </Text>
            <Text style={styles.subTitle}>
                {count}
            </Text> 
        </View>
    )
}

const styles = StyleSheet.create({

    container: {

        flexDirection: 'column',
        alignItems: 'center',
        width: '100%',
        height: '100%'
    },
    title: {
        fontSize: 30,
        fontWeight: 100,
        color: 'black',
        marginTop: 20,
    },
    subTitle: {
        fontSize: 40,
        fontWeight: 900,
        color: 'blue',
        marginTop: 20,
    }
})

export default TimerView;




